<template>
	<div>
		<div class="permissManaTool">
			<el-input size="small" placeholder="请输入角色英文名" v-model="role.name" @keydown.enter.native="addRole()">
			    <template slot="prepend">ROLE_</template>
			</el-input>
			<el-input v-model="role.nameZh" placeholder="请输入角色中文名" size="small" @keydown.enter.native="addRole()"></el-input>
			<el-button size="small" icon="el-icon-plus" type="primary" @click="addRole">添加角色</el-button>
		</div>
		<div class="permissManaMain">
			<el-collapse v-model="activeName" accordion @change="change">
			  <el-collapse-item v-for="(item,index) in roles" :title="item.nameZh" :name="item.id" :key="index">
			    <el-card class="box-card">
			      <div slot="header" class="clearfix">
			        <span>可访问资源</span>
			        <el-button style="float: right; padding: 3px 0;color: #ff0000;" 
					@click="deleteRole(item)"
					type="text" icon="el-icon-delete">
					</el-button>
			      </div>
			      <div>
					  <el-tree show-checkbox :data="allMenus" 
					  :props="defaultProps" 
					  node-key="id"
					  ref="tree"
					  :key="index"
					  :default-checked-keys="selectMenus">
					  </el-tree>
					  <div style="display: flex;justify-content: flex-end;">
						  <el-button size="mini" @click="cancel">取消</el-button>
						  <el-button type="primary" size="mini" @click="doUpdate(item.id,index)">确定</el-button>
					  </div>
				  </div>
			    </el-card>
			  </el-collapse-item>
			</el-collapse>
		</div>
	</div>
</template>

<script>
	export default{
		name: "PermissManage",
		data(){
			return{
				role:{
					name: '',
					nameZh: '' 
				},
				roles: [],
				allMenus: [],
				defaultProps: {
				    children: 'children',
				    label: 'name'
				},
				selectMenus: [],
				activeName: -1
			}
		},
		methods:{
			initRoles(){
				this.getRequest("/system/basic/permiss/").then(resp=>{
					if (resp) {
						this.roles = resp;
					}
				});
			},
			change(rid){
				if(rid){
					this.allMenus = [];
					this.selectMenus = [];
					this.initAllMenus();
					this.initSelectMenus(rid);
				}
			},
			initAllMenus(){
				this.getRequest("/system/basic/permiss/menu").then(resp=>{
					if (resp) {
						this.allMenus = resp;
					}
				});
			},
			initSelectMenus(rid){
				this.getRequest("/system/basic/permiss/mid/"+rid).then(resp=>{
					if(resp){
						this.selectMenus = resp;
					}
				});
			},
			doUpdate(rid,index){
				let tree = this.$refs.tree[index];
				let selectedKeys = tree.getCheckedKeys(true);
				let url = "/system/basic/permiss/?rid="+rid;
				selectedKeys.forEach(mid=>{
					url+="&mids="+mid;
				});
				this.putRequest(url).then(resp=>{
					if (resp) {
						this.activeName = -1;
					}
				});
			},
			cancel(){
				this.activeName = -1;
			},
			addRole(){
				if (this.role.name && this.role.nameZh) {
					this.postRequest("/system/basic/permiss/role",this.role).then(resp=>{
						if (resp) {
							this.role.name = "";
							this.role.nameZh = "";
							this.initRoles();
							this.activeName = -1;
						}
					});
				}else{
					this.$message.error("字段不能为空！")
				}
			},
			deleteRole(role){
				this.$confirm('此操作将永久删除['+role.nameZh+']角色, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
							this.deleteRequest("/system/basic/permiss/role/"+role.id).then(resp=>{
								if (resp) {
									this.initRoles();
								}
							});
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消删除'
				          });          
				        });
			}
		},	
		mounted() {
			this.initRoles();
		}
	}
</script>

<style scoped>
	.permissManaTool{
		display: flex;
		justify-content: flex-start;
	}
	.permissManaTool .el-input{
		width: 300px;
		margin-right: 6px;
	}
	.permissManaMain{
		margin-top: 10px;
		width: 700px;
	}
</style>
